TopBarViewPort = Ext.extend(Ext.Viewport, {
    layout:'border',

    constructor: function(config) {
        Ext.apply(this, config);

        if (!this.toolbar) {
            this.toolbar = new Ext.Toolbar({
                buttonAlign: "right",
                region: "north",
                width: "100%",
                height: "20px",
                border: "1px solid #c3daf9"
            });
        }

        this.items = [];
        this.items[0] = this.toolbar;
        if (this.getPanels) {
            var panels = this.getPanels();
            for (var i = 0; i < panels.length; i++) {
                this.items[this.items.length] = panels[i];
            }
        }

        TopBarViewPort.superclass.constructor.call(this);

        var tb = this.toolbar;
        var onSuccess = function(o) {
            var json = Ext.util.JSON.decode(o.responseText);
            if (json) {
                if (json.email) {
                    tb.add({ text: json.email, xtype: 'tbtext' });
                }
                if (json.logoutUrl) {
                    tb.add({ text: 'Sign out', xtype: 'tbbutton',
                        handler:function() {
                            document.location = json.logoutUrl;
                        }
                    });
                }
                if (json.loginUrl) {
                    tb.add({ text: 'Sign in', xtype: 'tbbutton',
                        handler:function() {
                            document.location = json.loginUrl;
                        }
                    });
                }

                tb.doLayout();
            }
        };

        Ext.Ajax.request({
            url: "/whoami",
            method: "GET",
            success: onSuccess
        });
    }

});
